<!DOCTYPE html>
<html>
<head>
<title>DAY05</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
/* Author: Nicolas Hery - http://nicolashery.com */
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
/* Source: https://github.com/nicolahery/markdownpad-github */

/* RESET
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* BODY
=============================================================================*/

body {
  font-family: Helvetica, arial, freesans, clean, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
  padding: 20px;
  max-width: 960px;
  margin: 0 auto;
}

body>*:first-child {
  margin-top: 0 !important;
}

body>*:last-child {
  margin-bottom: 0 !important;
}

/* BLOCKS
=============================================================================*/

p, blockquote, ul, ol, dl, table, pre {
  margin: 15px 0;
}

/* HEADERS
=============================================================================*/

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
  font-size: inherit;
}

h1 {
  font-size: 28px;
  color: #000;
}

h2 {
  font-size: 24px;
  border-bottom: 1px solid #ccc;
  color: #000;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  color: #777;
  font-size: 14px;
}

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
  margin-top: 0;
  padding-top: 0;
}

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
  margin-top: 10px;
}

/* LINKS
=============================================================================*/

a {
  color: #4183C4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LISTS
=============================================================================*/

ul, ol {
  padding-left: 30px;
}

ul li > :first-child, 
ol li > :first-child, 
ul li ul:first-of-type, 
ol li ol:first-of-type, 
ul li ol:first-of-type, 
ol li ul:first-of-type {
  margin-top: 0px;
}

ul ul, ul ol, ol ol, ol ul {
  margin-bottom: 0;
}

dl {
  padding: 0;
}

dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}

dl dt:first-child {
  padding: 0;
}

dl dt>:first-child {
  margin-top: 0px;
}

dl dt>:last-child {
  margin-bottom: 0px;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}

dl dd>:first-child {
  margin-top: 0px;
}

dl dd>:last-child {
  margin-bottom: 0px;
}

/* CODE
=============================================================================*/

pre, code, tt {
  font-size: 12px;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
}

code, tt {
  margin: 0 0px;
  padding: 0px 0px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
}

pre>code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}

pre {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;
}

pre code, pre tt {
  background-color: transparent;
  border: none;
}

kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 10px;
    padding: 1px 4px;
}

/* QUOTES
=============================================================================*/

blockquote {
  border-left: 4px solid #DDD;
  padding: 0 15px;
  color: #777;
}

blockquote>:first-child {
  margin-top: 0px;
}

blockquote>:last-child {
  margin-bottom: 0px;
}

/* HORIZONTAL RULES
=============================================================================*/

hr {
  clear: both;
  margin: 15px 0;
  height: 0px;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 4px solid #ddd;
  padding: 0;
}

/* TABLES
=============================================================================*/

table th {
  font-weight: bold;
}

table th, table td {
  border: 1px solid #ccc;
  padding: 6px 13px;
}

table tr {
  border-top: 1px solid #ccc;
  background-color: #fff;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/* IMAGES
=============================================================================*/

img {
  max-width: 100%
}
</style>
</head>
<body>
<h3>20. 用户-上传头像-持久层</h3>
<p><strong>a. 规划SQL语句</strong></p>
<p>用户上传头像时，服务器端需要处理的任务有2个，第1是将文件保存到指定的位置，第2是将文件保存的路径存储到数据表中。</p>
<p>在数据表相关的操作中，本质上就是修改表中的字段即可：</p>
<pre><code>update t_user set avatar=?, modified_user=?, modified_time=? where uid=?
</code></pre>

<p>在执行修改之前，还应该检查用户数据是否正常，此前已经完成，无需再次开发。</p>
<p><strong>b. 接口与抽象方法</strong></p>
<p>在<code>UserMapper</code>接口中添加抽象方法：</p>
<pre><code>/**
 * 更新用户的头像
 * @param uid 用户的id
 * @param avatar 头像的路径
 * @param modifiedUser 修改执行人
 * @param modifiedTime 修改时间
 * @return 受影响的行数
 */
Integer updateAvatar(
        @Param(&quot;uid&quot;) Integer uid, 
        @Param(&quot;avatar&quot;) String avatar,
        @Param(&quot;modifiedUser&quot;) String modifiedUser,
        @Param(&quot;modifiedTime&quot;) Date modifiedTime);
</code></pre>

<p><strong>c. 配置映射</strong></p>
<p>在<code>UserMapper.xml</code>中配置以上方法的映射：</p>
<p>在<code>UserMapperTests</code>中编写并执行单元测试：</p>
<h3>21. 用户-上传头像-业务层</h3>
<p><strong>a. 规划异常</strong></p>
<p>对于更新数据而言，必然可能出现<code>UpdateException</code>；</p>
<p>在更新之前，还需要检查用户数据，则可能出现<code>UserNotFoundException</code>。</p>
<p>以上异常类均已经存在，无需创建新的异常类。</p>
<p><strong>b. 接口与抽象方法</strong></p>
<p>在<code>IUserService</code>中添加抽象方法：</p>
<pre><code>/**
 * 修改头像
 * @param uid 用户的id
 * @param username 用户名
 * @param avatar 头像的路径
 * @throws UserNotFoundException 用户数据不存在，或者已经被标记为删除
 * @throws UpdateException 更新数据失败
 */
void changeAvatar(Integer uid, String username, String avatar) 
    throws UserNotFoundException, UpdateException;
</code></pre>

<p><strong>c. 实现类与重写方法</strong></p>
<p>在<code>UserServiceImpl</code>中重写以上方法：</p>
<pre><code>public void changeAvatar(
    Integer uid, String username, String avatar) 
        throws UserNotFoundException, UpdateException {
    // 根据参数uid查询用户数据
    // 判断查询结果是否为null
    // 抛出：UserNotFoundException

    // 判断查询结果中的isDelete为1
    // 抛出：UserNotFoundException

    // 创建当前时间对象
    // 执行更新头像，并获取返回的受影响的行数
    // 判断受影响的行数是否不为1
    // 抛出：UpdateException
}
</code></pre>

<p>在<code>UserServiceTests</code>中编写并执行单元测试：</p>
<h3>22. 用户-上传头像-控制器层</h3>
<p><strong>a. 处理异常</strong></p>
<p><strong>b. 设计请求</strong></p>
<p><strong>c. 处理请求</strong></p>
<h3>23. 用户-上传头像-前端页面</h3>
<h3>--------------------------------------------</h3>
<h3>基于SpringMVC的文件上传</h3>
<h4>1. 创建项目</h4>
<p>创建<strong>Maven Project</strong>，Group Id值为<strong>cn.tedu.spring<strong>，Artifact Id为</strong>SPRINGMVC-UPLOAD</strong>，在配置依赖时，此次需要<code>spring-webmvc</code>依赖，另外，还需要<code>commons-fileupload</code>依赖：</p>
<pre><code>&lt;!-- 文件上传 --&gt;
&lt;dependency&gt;
    &lt;groupId&gt;commons-fileupload&lt;/groupId&gt;
    &lt;artifactId&gt;commons-fileupload&lt;/artifactId&gt;
    &lt;version&gt;1.4&lt;/version&gt;
&lt;/dependency&gt;
</code></pre>

<h4>2. 设计界面</h4>
<p>在<strong>webapp</strong>下创建<strong>index.html</strong>，作为用户选择文件上传的界面，该界面中，上传控件必须是<code>&lt;input type=&quot;file&quot; /&gt;</code>，控件所在的表单必须使用<code>POST</code>方式提交请求，且必须配置<code>enctype=&quot;multipart/form-data&quot;</code>，其它部分可以自行设计，例如：</p>
<pre><code>&lt;h1&gt;基于SpringMVC的文件上传&lt;/h1&gt;
&lt;form action=&quot;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;p&gt;请选择您要上传的文件&lt;/p&gt;
    &lt;p&gt;&lt;input type=&quot;file&quot; name=&quot;file&quot; /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;上传&quot; /&gt;&lt;/p&gt;
&lt;/form&gt;
</code></pre>

<h4>3. 配置MultipartResolver</h4>
<p>在Spring的配置文件中添加：</p>
<pre><code>&lt;!-- MultipartResolver --&gt;
&lt;bean id=&quot;multipartResolver&quot; 
    class=&quot;org.springframework.web.multipart.commons.CommonsMultipartResolver&quot;&gt;
&lt;/bean&gt;
</code></pre>

<p>添加以上配置后，暂时可以不用添加更多的配置。</p>
<h4>4. 通过控制器接收并处理请求</h4>
<p>创建<code>cn.tedu.spring.UploadController</code>控制器类，为控制器类添加<code>@Controller</code>注解：</p>
<pre><code>@Controller
public class UploadController {

}
</code></pre>

<p>检查Spring的配置文件，其中的组件扫描应该设置为<code>cn.tedu.spring</code>。</p>
<p>然后，在控制器类中添加处理请求的方法，该方法中必须添加<code>MultipartFile file</code>参数，该参数名需要与前端页面的控件中使用的<code>name</code>值保持一致，另外，需要添加<code>@RequestParam(&quot;file&quot;)</code>注解，使用注解后，需要保持一致的名称就是注解中使用的名称：</p>
<pre><code>@RequestMapping(&quot;upload.do&quot;)
public String handleUpload(@RequestParam(&quot;file&quot;) MultipartFile file) {

    return null;
}
</code></pre>

<p>注意：在前端页面中，还要设置表单提交到<code>upload.do</code>路径。</p>
<p>处理请求的方法中，参数对象表示的就是客户端提交的需要上传的文件，只需要调用参数对象<code>transferTo(File dest)</code>方法即可实现文件上传：</p>
<pre><code>@Controller
public class UploadController {

    @RequestMapping(value=&quot;upload.do&quot;, method=RequestMethod.POST)
    public String handleUpload(
        @RequestParam(&quot;file&quot;) MultipartFile file) throws IllegalStateException, IOException {

        // 确定上传到服务器，保存到的目标文件
        File dest = new File(&quot;d:/1.jpg&quot;);
        // 执行保存
        file.transferTo(dest);

        return null;
    }

}
</code></pre>

<h4>5. 关于上传后在服务器端的文件名</h4>
<p>保存到服务器端后使用的文件名必须不能发生冲突，否则，后续上传的文件，会覆盖前序上传的文件！</p>
<p>关于<code>File</code>类，使用1个<code>String</code>作为构造方法参数时，表示目标文件的完整路径，也可以使用2个<code>String</code>作为构造方法的参数，第1个表示文件夹，第2个表示文件名，所以，也可以是：</p>
<pre><code>// 确定上传到服务器，保存到的目标文件
File dest = new File(&quot;d:/&quot;, &quot;1.jpg&quot;);
</code></pre>

<p>接下来，应该将第2个参数设置为变量，以保证各上传的文件名不发生冲突！</p>
<p>关于文件名的设置策略，可以自行决定，使用时间、随机数等元素作为文件名的一部分，就可以保证文件名不会发生冲突！</p>
<p>例如：使用UUID作为文件名：</p>
<pre><code>// 确定文件名
String filename = UUID.randomUUID().toString();

// 确定上传到服务器，保存到的目标文件
File dest = new File(&quot;d:/&quot;, filename);
</code></pre>

<p>另外，还需要保证文件有正确的扩展名，应该取决于上传时，该文件在客户端计算机中保存时使用的名称，通过参数对象的<code>String getOriginalFilename()</code>方法可以获取文件的原名，然后查询最后一个小数点的位置，并截取出扩展名即可：</p>
<pre><code>// 获取文件原名
String originalFilename = file.getOriginalFilename();
System.out.println(&quot;originalFilename=&quot; + originalFilename);
// 获取扩展名
String suffix = &quot;&quot;;
int beginIndex = originalFilename.lastIndexOf(&quot;.&quot;);
if (beginIndex != -1) {
    suffix = originalFilename.substring(beginIndex);
}
// 确定文件名
String filename = UUID.randomUUID().toString() + suffix;
</code></pre>

<h4>6. 确定上传的文件夹</h4>
<p>文件必须上传到部署的Tomcat中，当上传后，才可以保证后续的使用或下载，可以通过<code>HttpServletRequest</code>对象的<code>getServletContext().getRealPath(&quot;upload&quot;)</code>获取指定的文件夹的实际路径：</p>
<pre><code>// 确定上传的文件夹
String dirPath = request.getServletContext().getRealPath(&quot;upload&quot;);
File dir = new File(dirPath);
if (!dir.exists()) {
    dir.mkdirs();
}
System.out.println(&quot;dir=&quot; + dir);
</code></pre>

<p>基于该文件夹确定最终上传的文件位置：</p>
<pre><code>// 确定上传到服务器，保存到的目标文件
File dest = new File(dir, filename);
</code></pre>

<h4>7. MultipartFile相关API</h4>
<p><strong>7.1. boolean isEmpty()</strong></p>
<p>该方法用于判断上传的文件是否为空，当用户没有选择需要上传的文件，或选中的文件是空文件(0字节)时，该方法返回<code>true</code>，可用于验证：</p>
<pre><code>boolean isEmpty = file.isEmpty();
System.out.println(&quot;isEmpty=&quot; + isEmpty);
if (isEmpty) {
    return &quot;error&quot;;
}
</code></pre>

<p><strong>7.2. long getSize()</strong></p>
<p>该方法用于获取文件的大小，以字节为单位，通常，用于限制上传的文件大小：</p>
<pre><code>long size = file.getSize();
System.out.println(&quot;size=&quot; + size);
if (size &gt; 2 * 1024 * 1024) {
    return &quot;error&quot;;
}
</code></pre>

<p><strong>7.3. String getContentType()</strong></p>
<p>该方法用于获取文件的MIME类型，通常，用于限制上传的文件的类型：</p>
<pre><code>String contentType = file.getContentType();
System.out.println(&quot;contentType=&quot; + contentType);
List&lt;String&gt; types = new ArrayList&lt;String&gt;();
types.add(&quot;image/jpeg&quot;);
types.add(&quot;image/png&quot;);
types.add(&quot;image/gif&quot;);
if (!types.contains(contentType)) {
    return &quot;error&quot;;
}
</code></pre>

<p>关于各种文件扩展名对应的MIME类型，可以上网查阅，也可以在Tomcat目录中的<strong>conf/web.xml</strong>文件中查找。</p>
<p>MIME的值，完全取决于文件的扩展名，如果文件的扩展名被修改，MIME也可能发生变化。</p>
<p><strong>7.4. String getOriginalFilename()</strong></p>
<p>获取文件的原名，即该文件在客户端的文件全名，典型的用途就是获取文件的扩展名。</p>
<p><strong>7.5. void transferTo(File dest)</strong></p>
<p>执行保存所上传的文件。</p>
<p><strong>7.6. InputStream getInputStream()</strong></p>
<p>获取输入字节流，用于自定义接收所上传的文件的数据。</p>
<p>注意：该方法与以上<code>transferTo()</code>不可以同时使用，对于每个请求，只能选取其中1个方法来获取数据并保存文件。</p>
<h4>8. 关于MultipartResolver的配置</h4>
<p><strong>8.1. maxUploadSize</strong></p>
<p>用于配置上传的文件的最大大小，例如：当设置值为5M时，则上传的文件均不可以超过5M，即使一次性上传10个文件，则10个文件的大小总和不允许超过5M。</p>
<p>设置方式例如：</p>
<pre><code>&lt;!-- CommonsMultipartResolver --&gt;
&lt;bean id=&quot;multipartResolver&quot; 
    class=&quot;org.springframework.web.multipart.commons.CommonsMultipartResolver&quot;&gt;
    &lt;property name=&quot;maxUploadSize&quot; 
        value=&quot;5242880&quot; /&gt;
&lt;/bean&gt;
</code></pre>

<p><strong>8.2. maxUploadSizePerFile</strong></p>
<p>用于配置上传的每个文件的最大大小，例如：当设置值为5M时，如果一次性上传10个文件，则每个文件都不允许超过5M，但是总大小可以接近50M。</p>
<p><strong>8.3. defaultEncoding</strong></p>
<p>用于配置默认编码，上传的文件本身是不考虑编码问题的，只要文件的内容(表示文件内容信息含义的二进制序列)是正确的就可以了！由于上传过程中，会通过<code>CommonsMultipartResolver</code>去组织上传时表单中的数据，表单中可能包括例如输入框等控件，则同一个表单中还可能提交例如用户名等文本信息，这些信息都需要使用正确的编码来进行传递！</p>

</body>
</html>
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
